<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
    <title>旋转</title>
</head>
<body>
<canvas id="canvas"></canvas>
<canvas id="heheCanvas"></canvas>
<script>
    function draw() {
        var ctx = document.getElementById('canvas').getContext('2d');
        ctx.translate(75, 75);

        for (var i = 1; i < 6; i++) { // Loop through rings (from inside to out)
            ctx.save();
            ctx.fillStyle = 'rgb(' + (51 * i) + ',' + (255 - 51 * i) + ',255)';

            for (var j = 0; j < i * 6; j++) { // draw individual dots
                ctx.rotate(Math.PI * 2 / (i * 6));//画一次，多旋转一次，角度累加。直到360
                ctx.beginPath();
                ctx.arc(0, i * 12.5, 5, 0, Math.PI * 2, true);
                ctx.fill();
            }


            ctx.restore();
        }
    }

    function drawHehe() {
        var canvas = document.getElementById("heheCanvas");
        var ctx = canvas.getContext("2d");

        // ctx.save();
        ctx.lineWidth=1;
        // 密集到一定程度，画笔之间没有间距，就是圆形
        ctx.translate(canvas.width/2,canvas.height/2);
        for (var i = 0; i < 36; i++) {

            ctx.moveTo(0, 0);
            ctx.lineTo(25, 0);

            ctx.moveTo(50,0);
            ctx.lineTo(75,0);
            //每次旋转10度
            ctx.rotate(Math.PI*2/36);
        }
        ctx.stroke();


        // ctx.restore();
    }

    draw();
    drawHehe();
</script>
</body>
</html>